<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
-->
<template>
  <!-- eslint-disable vue/no-mutating-props -->
  <ElTabs v-model="objData.repType" type="border-card" @tab-click="handleClick">
    <ElTabPane name="text">
      <template #label>
        <span><i class="el-icon-document"></i> 文本</span>
      </template>
      <ElInput v-model="objData.repContent" type="textarea" :rows="5" placeholder="请输入内容" />
    </ElTabPane>
    <ElTabPane name="image">
      <template #label>
        <span><i class="el-icon-picture"></i> 图片</span>
      </template>
      <ElRow>
        <div v-if="objData.repUrl" class="select-item">
          <img class="material-img" :src="objData.repUrl" />
          <p v-if="objData.repName" class="item-name">{{ objData.repName }}</p>
          <ElRow class="ope-row">
            <ElButton type="danger" icon="el-icon-delete" circle @click="deleteObj" />
          </ElRow>
        </div>
        <div v-if="!objData.repUrl">
          <ElRow style="text-align: center">
            <ElCol :span="12" class="col-select">
              <ElButton type="success" @click="openMaterial">
                素材库选择<i class="el-icon-circle-check el-icon--right"></i>
              </ElButton>
            </ElCol>
            <ElCol :span="12" class="col-add">
              <ElUpload
                :action="actionUrl"
                :headers="headers"
                multiple
                :limit="1"
                :on-success="handleUploadSuccess"
                :file-list="fileList"
                :before-upload="beforeImageUpload"
                :data="uploadData">
                <ElButton type="primary">上传图片</ElButton>
                <template #tip>
                  <div class="el-upload__tip">支持bmp/png/jpeg/jpg/gif格式，大小不超过2M</div>
                </template>
              </ElUpload>
            </ElCol>
          </ElRow>
        </div>
        <ElementDialog title="选择图片" :visible.sync="dialogImageVisible" width="90%" append-to-body>
          <WxMaterialSelect :obj-data="objData" @selectMaterial="selectMaterial" />
        </ElementDialog>
      </ElRow>
    </ElTabPane>
    <ElTabPane name="voice">
      <template #label>
        <span><i class="el-icon-phone"></i> 语音</span>
      </template>
      <ElRow>
        <div v-if="objData.repName" class="select-item2">
          <p class="item-name">{{ objData.repName }}</p>
          <div class="item-infos">
            <WxVoicePlayer
              :obj-data="Object.assign(tempPlayerObj, { repMediaId: objData.media_id, repName: objData.repName })" />
          </div>
          <ElRow class="ope-row">
            <ElButton type="danger" icon="el-icon-delete" circle @click="deleteObj" />
          </ElRow>
        </div>
        <div v-if="!objData.repName">
          <ElRow style="text-align: center">
            <ElCol :span="12" class="col-select">
              <ElButton type="success" @click="openMaterial">
                素材库选择<i class="el-icon-circle-check el-icon--right"></i>
              </ElButton>
            </ElCol>
            <ElCol :span="12" class="col-add">
              <ElUpload
                :action="actionUrl"
                :headers="headers"
                multiple
                :limit="1"
                :on-success="handleUploadSuccess"
                :file-list="fileList"
                :before-upload="beforeVoiceUpload"
                :data="uploadData">
                <ElButton type="primary">点击上传</ElButton>
                <template #tip>
                  <div class="el-upload__tip">格式支持mp3/wma/wav/amr，文件大小不超过2M，播放长度不超过60s</div>
                </template>
              </ElUpload>
            </ElCol>
          </ElRow>
        </div>
        <ElementDialog title="选择语音" :visible.sync="dialogVoiceVisible" width="90%" append-to-body>
          <WxMaterialSelect :obj-data="objData" @selectMaterial="selectMaterial" />
        </ElementDialog>
      </ElRow>
    </ElTabPane>
    <ElTabPane name="video">
      <template #label>
        <span><i class="el-icon-share"></i> 视频</span>
      </template>
      <ElRow>
        <ElInput v-model="objData.repName" placeholder="请输入标题" />
        <div style="margin: 20px 0"></div>
        <ElInput v-model="objData.repDesc" placeholder="请输入描述" />
        <div style="margin: 20px 0"></div>
        <div style="text-align: center">
          <a v-if="objData.repUrl" target="_blank" :href="objData.repUrl"><i class="icon-bofang">&nbsp;播放视频</i></a>
        </div>
        <div style="margin: 20px 0"></div>
        <div style="text-align: center">
          <ElButton type="success" @click="openMaterial">
            素材库选择<i class="el-icon-circle-check el-icon--right"></i>
          </ElButton>
        </div>
        <ElementDialog title="选择视频" :visible.sync="dialogVideoVisible" width="90%" append-to-body>
          <WxMaterialSelect :obj-data="objData" @selectMaterial="selectMaterial" />
        </ElementDialog>
      </ElRow>
    </ElTabPane>
    <ElTabPane name="news">
      <template #label>
        <span><i class="el-icon-news"></i> 图文</span>
      </template>
      <ElRow>
        <div v-if="objData.content" class="select-item">
          <WxNews :obj-data="objData.content.newsItem" />
          <ElRow class="ope-row">
            <ElButton type="danger" icon="el-icon-delete" circle @click="deleteObj" />
          </ElRow>
        </div>
        <div v-if="!objData.content">
          <ElRow style="text-align: center">
            <ElCol :span="24" class="col-select2">
              <ElButton type="success" @click="openMaterial">
                素材库选择<i class="el-icon-circle-check el-icon--right"></i>
              </ElButton>
            </ElCol>
          </ElRow>
        </div>
        <ElementDialog title="选择图文" :visible.sync="dialogNewsVisible" width="90%" append-to-body>
          <WxMaterialSelect :obj-data="objData" @selectMaterial="selectMaterial" />
        </ElementDialog>
      </ElRow>
    </ElTabPane>
  </ElTabs>
</template>

<script>
  /* eslint-disable vue/no-mutating-props */
  import { getMaterialVideo, getPage } from '@/api/mp/wx-material'
  import WxNews from '@/components/wechat/WxNews'
  import WxMaterialSelect from '@/components/wechat/WxMaterialSelect'
  import WxVoicePlayer from '@/components/wechat/WxVoicePlayer'
  import { getToken } from '@/util/auth'
  import { mapState } from 'vuex'

  export default {
    name: 'WxReplySelect',
    components: {
      WxNews,
      WxMaterialSelect,
      WxVoicePlayer
    },
    props: {
      objData: {
        type: Object
      }
    },
    data() {
      return {
        tempPlayerObj: {
          type: '2'
        },
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20, // 每页显示多少条
          ascs: [], // 升序字段
          descs: [] // 降序字段
        },
        tableLoading: false,
        dialogNewsVisible: false,
        dialogImageVisible: false,
        dialogVoiceVisible: false,
        dialogVideoVisible: false,
        dialogThumbVisible: false,
        tempObj: new Map().set(this.objData.repType, Object.assign({}, this.objData)),
        fileList: [],
        uploadData: {
          mediaType: this.objData.repType,
          title: '',
          introduction: '',
          appId: this.objData.appId
        },
        actionUrl: '/mp/wx-material/materialFileUpload',
        headers: {
          'TENANT-ID': this.sysUser.tenantId,
          Authorization: `Bearer ${getToken()}`
        }
      }
    },
    computed: {
      ...mapState('user', ['sysUser'])
    },
    methods: {
      beforeThumbImageUpload(file) {
        const isType =
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/gif' ||
          file.type === 'image/bmp' ||
          file.type === 'image/jpg'
        const isLt = file.size / 1024 / 1024 < 2
        if (!isType) {
          this.$message.error('上传图片格式不对!')
        }
        if (!isLt) {
          this.$message.error('上传图片大小不能超过2M!')
        }
        return isType && isLt
      },
      deleteObj() {
        this.$delete(this.objData, 'repName')
        this.$delete(this.objData, 'repUrl')
        this.$delete(this.objData, 'content')
      },
      beforeVoiceUpload(file) {
        this.tableLoading = true
        const isLt = file.size / 1024 / 1024 < 2
        if (!isLt) {
          this.$message.error('上传语音大小不能超过2M!')
        }
        return isLt
      },
      beforeImageUpload(file) {
        const isType =
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/gif' ||
          file.type === 'image/bmp' ||
          file.type === 'image/jpg'
        const isLt = file.size / 1024 / 1024 < 2
        if (!isType) {
          this.$message.error('上传图片格式不对!')
        }
        if (!isLt) {
          this.$message.error('上传图片大小不能超过2M!')
        }
        return isType && isLt
      },
      handleUploadSuccess(response, file, fileList) {
        if (response.code === 0) {
          this.fileList = []
          this.uploadData.title = ''
          this.uploadData.introduction = ''
          const item = response.data
          this.selectMaterial(item)
        } else {
          this.$message.error(`上传出错：${response.msg}`)
        }
      },
      handleClick(tab, event) {
        this.uploadData.mediaType = this.objData.repType
        const tempObjItem = this.tempObj.get(this.objData.repType)
        if (tempObjItem) {
          this.objData.repName = tempObjItem.repName ? tempObjItem.repName : null
          this.objData.repMediaId = tempObjItem.repMediaId ? tempObjItem.repMediaId : null
          this.objData.media_id = tempObjItem.media_id ? tempObjItem.media_id : null
          this.objData.repUrl = tempObjItem.repUrl ? tempObjItem.repUrl : null
          this.objData.content = tempObjItem.content ? tempObjItem.content : null
          this.objData.repDesc = tempObjItem.repDesc ? tempObjItem.repDesc : null
        } else {
          this.$delete(this.objData, 'repName')
          this.$delete(this.objData, 'repMediaId')
          this.$delete(this.objData, 'media_id')
          this.$delete(this.objData, 'repUrl')
          this.$delete(this.objData, 'content')
          this.$delete(this.objData, 'repDesc')
        }
      },
      selectMaterial(item, appId) {
        const tempObjItem = {}
        tempObjItem.repType = this.objData.repType
        tempObjItem.repMediaId = item.mediaId
        tempObjItem.media_id = item.mediaId
        tempObjItem.content = item.content

        this.dialogNewsVisible = false
        this.dialogImageVisible = false
        this.dialogVoiceVisible = false
        this.dialogVideoVisible = false
        this.objData.repMediaId = item.mediaId
        this.objData.media_id = item.mediaId
        this.objData.content = item.content
        if (this.objData.repType === 'music') {
          tempObjItem.repThumbMediaId = item.mediaId
          tempObjItem.repThumbUrl = item.url
          this.objData.repThumbMediaId = item.mediaId
          this.objData.repThumbUrl = item.url
          this.dialogThumbVisible = false
        } else {
          tempObjItem.repName = item.name
          tempObjItem.repUrl = item.url
          this.objData.repName = item.name
          this.objData.repUrl = item.url
        }
        if (this.objData.repType === 'video') {
          getMaterialVideo({
            mediaId: item.mediaId,
            appId
          }).then(response => {
            const data = response.data.data
            this.$set(this.objData, 'repName', data.title)
            this.$set(this.objData, 'repDesc', data.description)
            this.$set(this.objData, 'repUrl', data.downUrl)
            tempObjItem.repDesc = data.description
            tempObjItem.repUrl = data.downUrl
          })
        }
        this.tempObj.set(this.objData.repType, tempObjItem)
      },
      openMaterial() {
        if (this.objData.repType === 'news') {
          this.dialogNewsVisible = true
        } else if (this.objData.repType === 'image') {
          this.dialogImageVisible = true
        } else if (this.objData.repType === 'voice') {
          this.dialogVoiceVisible = true
        } else if (this.objData.repType === 'video') {
          this.dialogVideoVisible = true
        } else if (this.objData.repType === 'music') {
          this.dialogThumbVisible = true
        }
      },
      getPage(page, params) {
        this.tableLoading = true
        getPage(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize,
              type: this.objData.repType
            },
            params
          )
        ).then(response => {
          this.tableData = response.data.items
          this.page.total = response.data.totalCount
          this.page.currentPage = page.currentPage
          this.page.pageSize = page.pageSize
          this.tableLoading = false
        })
      },
      sizeChange(val) {
        this.page.currentPage = 1
        this.page.pageSize = val
        this.getPage(this.page)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .public-account-management {
    .el-input {
      width: 70%;
      margin-right: 2%;
    }
  }

  .pagination {
    margin-right: 25px;
    text-align: right;
  }

  .select-item {
    width: 280px;
    margin: 0 auto 10px;
    padding: 10px;
    border: 1px solid #eaeaea;
  }

  .select-item2 {
    margin: 0 auto 10px;
    padding: 10px;
    border: 1px solid #eaeaea;
  }

  .ope-row {
    padding-top: 10px;
    text-align: center;
  }

  .item-name {
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    text-overflow: ellipsis;
  }

  .el-form-item__content {
    line-height: unset !important;
  }

  .col-select {
    width: 49.5%;
    height: 160px;
    padding: 50px 0;
    border: 1px solid rgb(234, 234, 234);
  }

  .col-select2 {
    height: 160px;
    padding: 50px 0;
    border: 1px solid rgb(234, 234, 234);
  }

  .col-add {
    float: right;
    width: 49.5%;
    height: 160px;
    padding: 50px 0;
    border: 1px solid rgb(234, 234, 234);
  }

  .avatar-uploader-icon {
    width: 100px !important;
    height: 100px !important;
    color: #8c939d;
    font-size: 28px;
    line-height: 100px !important;
    text-align: center;
    border: 1px solid #d9d9d9;
  }

  .material-img {
    width: 100%;
  }

  .thumb-div {
    display: inline-block;
    text-align: center;
  }

  .item-infos {
    width: 30%;
    margin: auto;
  }
</style>
